<template>
  <view class="container">
    <template v-if="formData.dates.length > 0">
      <view class="content-wrapper">
        <!-- 表单内容 -->
        <template v-if="formData.dates.length > 0 && currentForm">
          <uv-gap height="10"></uv-gap>
          <uv-form
            ref="formRef"
            :model="currentForm"
            :rules="formRules"
            labelPosition="left"
            labelWidth="160"
            borderBottom
          >
            <template
              v-if="onLoadOption?.type === 'add' && formData.dates.length > 0"
            >
              <!-- 日期选择区域 -->
              <view class="date-select-area">
                <view class="date-info">
                  <text class="date-label">已选日期</text>
                  <text class="date-count" v-if="formData.dates.length"
                    >{{ formData.dates.length }}天</text
                  >
                </view>
                <uv-button
                  @click="eventDateHandle('open')"
                  text="选择日期"
                  type="primary"
                  size="small"
                  :custom-style="{
                    borderRadius: '50rpx',
                    width: '200rpx',
                    height: '70rpx',
                    display: 'flex',
                    alignItems: 'center',
                    justifyContent: 'center',
                    boxShadow: '0 4rpx 16rpx rgba(41, 121, 255, 0.2)',
                  }"
                >
                  <template #default>
                    <view class="button-content">
                      <uv-icon
                        name="calendar"
                        size="24"
                        color="#fff"
                        style="margin-right: 6rpx"
                      ></uv-icon>
                      <text>选择日期</text>
                    </view>
                  </template>
                </uv-button>
              </view>

              <!-- 日期切换标签 -->
              <uv-sticky bgColor="#fff" offsetTop="-10">
                <view class="tabs-wrapper">
                  <uv-tabs
                    :lineWidth="80"
                    :list="formData.dates"
                    :current="currentDateIndex"
                    @change="(item) => eventDateHandle('tabsChange', item)"
                  ></uv-tabs>
                </view>
              </uv-sticky>
            </template>

            <!-- 产品信息 -->
            <view class="form-card">
              <view class="card-title">
                <view class="icon-wrapper">
                  <uv-icon name="gift" size="28" color="#2979ff"></uv-icon>
                </view>
                <text>产品信息</text>
              </view>
              <uv-cell-group>
                <uv-form-item
                  label="供货厂商"
                  prop="manufacturer"
                  borderBottom
                  required
                >
                  <view
                    class="spec-selector"
                    @click="eventDateHandle('pickerManufacturerOpen')"
                  >
                    <text v-if="currentForm.manufacturer">{{
                      currentForm.manufacturer
                    }}</text>
                    <text v-else class="placeholder">请选择供货厂商</text>
                    <uv-icon
                      name="arrow-right"
                      size="16"
                      color="#999"
                    ></uv-icon>
                  </view>
                  <uv-picker
                    ref="pickerManufacturerRef"
                    :columns="[manufacturers]"
                    @confirm="
                      (e) => eventDateHandle('pickerManufacturerConfirm', e)
                    "
                    @cancel="
                      (e) => eventDateHandle('pickerManufacturerCancel', e)
                    "
                    :show-toolbar="true"
                    title="选择供货厂商"
                  >
                  </uv-picker>
                </uv-form-item>
                <uv-form-item
                  label="规格型号"
                  prop="specification"
                  borderBottom
                  required
                >
                  <view
                    class="spec-selector"
                    @click="eventDateHandle('pickerProductSpecOpen')"
                  >
                    <text v-if="currentForm.specification">{{
                      currentForm.specification
                    }}</text>
                    <text v-else class="placeholder">请选择规格型号</text>
                    <uv-icon
                      name="arrow-right"
                      size="16"
                      color="#999"
                    ></uv-icon>
                  </view>
                  <uv-picker
                    ref="pickerSpecificationRef"
                    :columns="[specifications]"
                    @confirm="
                      (e) => eventDateHandle('pickerProductSpecConfirm', e)
                    "
                    @cancel="
                      (e) => eventDateHandle('pickerProductSpecCancel', e)
                    "
                    :show-toolbar="true"
                    title="选择规格型号"
                  >
                  </uv-picker>
                </uv-form-item>
              </uv-cell-group>
            </view>
            <!-- 价格信息 -->
            <view class="form-card">
              <view class="card-title">
                <view class="icon-wrapper">
                  <uv-icon name="bell" size="28" color="#2979ff"></uv-icon>
                </view>
                <text>价格信息</text>
              </view>
              <uv-cell-group>
                <uv-form-item
                  label="数量"
                  prop="quantity"
                  borderBottom
                  required
                >
                  <uv-input
                    v-model="currentForm.quantity"
                    type="number"
                    placeholder="请输入数量"
                    border="none"
                    clearable
                  >
                    <template #suffix>
                      <text class="input-suffix">{{
                        currentForm.unit || defaultUnit
                      }}</text>
                    </template>
                  </uv-input>
                </uv-form-item>

                <uv-form-item
                  label="单价"
                  prop="unitPrice"
                  borderBottom
                  required
                >
                  <uv-input
                    v-model="currentForm.unitPrice"
                    type="number"
                    placeholder="请输入单价"
                    border="none"
                    clearable
                  >
                    <template #prefix>
                      <text class="input-prefix">¥</text>
                    </template>
                  </uv-input>
                </uv-form-item>

                <uv-form-item label="总进价" borderBottom>
                  <uv-input
                    v-model="currentForm.totalAmount"
                    type="number"
                    disabled
                    :placeholder="
                      currentForm.totalAmount || '总进价 = 单价 × 数量'
                    "
                    border="none"
                  >
                    <template #prefix>
                      <text class="input-prefix">¥</text>
                    </template>
                  </uv-input>
                </uv-form-item>

                <!-- 支付状态开关 -->
                <view class="payment-status">
                  <uv-form-item label="汇款状态" prop="status" borderBottom>
                    <uv-radio-group v-model="currentForm.status">
                      <uv-radio
                        :customStyle="{ margin: '4px' }"
                        v-for="(item, index) in [
                          {
                            name: '未汇款',
                            value: 0,
                          },
                          {
                            name: '部分汇款',
                            value: 1,
                          },
                          {
                            name: '已汇款',
                            value: 2,
                          },
                        ]"
                        :key="index"
                        :label="item.name"
                        :name="item.value"
                      >
                      </uv-radio>
                    </uv-radio-group>
                  </uv-form-item>
                </view>
                <!-- 首付金额 -->
                <uv-form-item
                  v-if="currentForm.status == 1"
                  label="已付金额"
                  prop="paidAmount"
                  borderBottom
                  required
                >
                  <uv-input
                    v-model="currentForm.paidAmount"
                    type="number"
                    placeholder="请输入已付金额"
                    border="none"
                    clearable
                  >
                    <template #prefix>
                      <text class="input-prefix">¥</text>
                    </template>
                  </uv-input>
                </uv-form-item>
                <view class="payment-status">
                  <uv-form-item label="是否入库" prop="isInStock" borderBottom>
                    <uv-switch
                      v-model="currentForm.isInStock"
                      @change="handleInStockStatusChange"
                      activeColor="#2979ff"
                      :active-value="true"
                      :inactive-value="false"
                    ></uv-switch>
                  </uv-form-item>
                </view>
              </uv-cell-group>
            </view>

            <!-- 金额汇总 -->
            <template>
              <view class="form-card summary-card">
                <uv-cell-group>
                  <uv-cell
                    :title="'订单总额'"
                    :value="'¥' + (currentForm.totalAmount || '0.00')"
                    :titleStyle="{ color: '#666', fontSize: '28rpx' }"
                    :valueStyle="{
                      color: '#2979ff',
                      fontSize: '32rpx',
                      fontWeight: '500',
                    }"
                  >
                  </uv-cell>
                  <uv-cell
                    :title="'已付金额'"
                    :value="'¥' + currentForm.paidAmount"
                    :titleStyle="{ color: '#666', fontSize: '28rpx' }"
                    :valueStyle="{
                      color: '#19be6b',
                      fontSize: '32rpx',
                      fontWeight: '500',
                    }"
                  >
                  </uv-cell>
                  <uv-cell
                    :title="'剩余金额'"
                    :value="'¥' + currentForm.remainingAmount"
                    :titleStyle="{ color: '#666', fontSize: '28rpx' }"
                    :valueStyle="{
                      color: '#ff4d4f',
                      fontSize: '32rpx',
                      fontWeight: '500',
                    }"
                  >
                  </uv-cell>
                </uv-cell-group>
              </view>
            </template>
          </uv-form>
        </template>
      </view>
      <!-- 底部按钮 -->
      <view class="footer-buttons">
        <view class="button-group">
          <view
            class="button-wrapper"
            :style="{ paddingRight: isEdit ? '24rpx' : '0' }"
          >
            <uv-button
              v-if="isEdit"
              type="error"
              text="删除订单"
              @click="eventDateHandle('handleDelete')"
              :customStyle="{
                borderRadius: '12rpx',
              }"
            ></uv-button>
          </view>
          <view
            class="button-wrapper"
            :style="{ paddingLeft: isEdit ? '24rpx' : '0' }"
          >
            <uv-button
              type="primary"
              :text="isEdit ? '保存修改' : '提交订单'"
              @click="eventDateHandle('handleSubmit')"
              :loading="isSubmitting"
              :customStyle="{
                borderRadius: '12rpx',
              }"
            ></uv-button>
          </view>
        </view>
      </view>
      <!-- 确认弹窗 -->
      <uv-modal
        ref="modal"
        :title="modalConfig.title"
        :content="modalConfig.content"
        :show-cancel-button="true"
        confirm-color="#2979ff"
        @confirm="handleModalConfirm"
      ></uv-modal>

      <!-- 提示组件 -->
      <uv-toast ref="toast"></uv-toast>
      <uv-notify ref="notify"></uv-notify>
    </template>

    <view
      v-if="onLoadOption?.type === 'add' && formData.dates.length == 0"
      class="add-icon"
      @click="eventDateHandle('open')"
    >
      <view class="add-content">
        <view class="icon-wrapper">
          <uv-icon name="plus" color="#2979ff" size="36"></uv-icon>
        </view>
        <text class="add-text">点击选择日期</text>
      </view>
    </view>
    <uv-calendar
      ref="calendar"
      :insert="false"
      mode="multiple"
      :show-lunar="false"
      :closeOnClickOverlay="false"
      :range-color="themeColor"
      :active-date="dates"
      @confirm="(e) => eventDateHandle('confirm', e)"
    />
  </view>
</template>

<script setup>
import {
  ref,
  reactive,
  computed,
  watch,
  onMounted,
  nextTick,
  watchEffect,
} from "vue";
import { onLoad, onUnload } from "@dcloudio/uni-app";
import cloudConfig from "@/config/uniCloudConfig.js";
import { formatDate } from "@/utils/utils";
// const uniCloudInStockManager = uniCloud.importObject("inStockManager"); //销售表

// const uniCloudInStockManager = uniCloud.importObject('salesManager', {
// 	customUI: true, // 重要: 指定为线上云对象
// 	endpoint: 'https://env-00jxta4kavr1.api-hz.cloudbasefunction.cn' // 你的线上云环境地址
// });
const uniCloudInStockManager = cloudConfig.getCloudObject("inStockManager");
// 组件引用
const formRef = ref(null);
const calendar = ref(null);
const modal = ref(null);
const toast = ref(null);
const notify = ref(null);
// 供货厂商选择
const pickerManufacturerRef = ref(null);
// 规格选择
const pickerSpecificationRef = ref(null);

// 状态管理
const isEdit = ref(false);
const isSubmitting = ref(false);
const currentDateIndex = ref(0);
const onLoadOption = ref(null);
// 供货厂商列表
const manufacturers = [
  "虎狮水泥",
  "明狮水泥",
  "万年水泥",
  "豪福水泥",
  "红狮水泥",
];
// 规格列表
const specifications = ["325", "325R", "425", "425R"];

// 表单数据
const formData = ref({
  dates: [],
  forms: [],
});

const getEmptyForm = () => {
  return {
    date: "",
    manufacturer: "", // 建材名称
    specification: "", // 规格
    quantity: 0, // 数量
    remainingQuantity: 0, // 剩余数量
    status: 0, // 0: 未付款, 1: 部分付款, 2: 已付清
    unit: "吨", // 单位
    unitPrice: 0, // 单价
    totalAmount: 0, // 总金额
    paidAmount: 0, // 已付金额
    remainingAmount: 0, // 剩余金额
    remark: "", // 备注
    outStockRecords: [], // 出库记录
    isInStock: false, // 是否入库
  };
};

// 当前表单
const currentForm = computed(() => {
  const form =
    formData.value.forms[currentDateIndex.value] || ref(getEmptyForm());
  return form;
});

//监听剩余金额
watchEffect(() => {
  const currentForm = formData.value.forms[currentDateIndex.value];
  //已付款
  if (currentForm?.status === 2) {
    // 已汇款
    currentForm.remainingAmount = 0;
    currentForm.paidAmount = currentForm?.totalAmount || 0;
  } else if (currentForm?.status === 1) {
    //部分汇款
    const total = currentForm.totalAmount || 0;
    const initial = currentForm.paidAmount || 0;
    currentForm.remainingAmount = Number((total - initial).toFixed(2)) || 0;
  } else {
    //未汇款
    currentForm.remainingAmount = currentForm?.totalAmount || 0;
    currentForm.paidAmount = 0;
  }
});

// 模态框配置
const modalConfig = reactive({
  title: "",
  content: "",
  action: "",
});

// 表单验证规则
const formRules = {
  manufacturer: {
    required: true,
    message: "请选择供货厂商",
    trigger: ["blur", "change"],
  },
  specification: {
    required: true,
    message: "请选择规格型号",
    trigger: ["blur", "change"],
  },
  quantity: [
    {
      required: true,
      message: "请输入数量",
      trigger: ["blur", "change"],
    },
    {
      validator: (rule, value, callback) => {
        if (value && (!isNumber(value) || Number(value) <= 0)) {
          callback(new Error("请输入有效的数量"));
        } else {
          callback();
        }
      },
      trigger: ["blur", "change"],
    },
  ],
  unitPrice: [
    {
      required: true,
      message: "请输入单价",
      trigger: ["blur", "change"],
    },
    {
      validator: (rule, value, callback) => {
        if (value && (!isNumber(value) || Number(value) < 0)) {
          callback(new Error("请输入有效的单价"));
        } else {
          callback();
        }
      },
      trigger: ["blur", "change"],
    },
  ],
};

// 数字验证
const isNumber = (value) => {
  return !isNaN(parseFloat(value)) && isFinite(value);
};
// 切换日期标签时的处理
const handleTabsChange = (item) => {
  // 切换到新的日期
  currentDateIndex.value = item.index;
};
// 事件处理
const eventDateHandle = async (eType, eData) => {
  // console.log(eType, eData, "==eventDateHandle===");
  switch (eType) {
    case "handleSubmit": // 提交处理
      // 提交处理
      if (isSubmitting.value) return;
      if (!formData.value.dates.length) {
        return toast.value?.show({
          type: "warning",
          message: "请选择日期",
        });
      }

      const isValid = await validateForm();
      if (!isValid) return;

      modalConfig.title = "确认提交";
      modalConfig.content = `确定要${
        isEdit.value ? "更新" : "提交"
      }这些订单吗？`;
      modalConfig.action = "submit";
      modal.value?.open();
      break;

    case "handleDelete": //删除处理
      modalConfig.title = "确认删除";
      modalConfig.content = "是否确认删除该记录？删除后无法恢复。";
      modalConfig.action = "delete";
      modal.value?.open();
      break;

    case "open": // 打开日历
      calendar.value.open();
      break;

    case "confirm": // 确认日期选择
      const dates = eData;
      if (!dates?.length) return;
      //日期
      formData.value.dates = dates.map((date) => {
        return {
          name: formatDate(date),
        };
      });
      //表单
      formData.value.forms = formData.value.dates.map((dateObj) => {
        return {
          ...getEmptyForm(),
          date: dateObj.name,
        };
      });

      currentDateIndex.value = 0;
      break;

    case "pickerProductSpecConfirm": // 处理规格选择确认
      const selectedSpec = eData.value[0];
      // 只更新当前日期表单的specification字段
      if (formData.value.forms[currentDateIndex.value]) {
        formData.value.forms[currentDateIndex.value].specification =
          selectedSpec;
      }
      pickerSpecificationRef.value?.close();
      break;

    case "pickerProductSpecCancel": // 处理规格选择取消
      pickerSpecificationRef.value?.close();
      break;
    case "pickerProductSpecOpen": // 处理规格选择取消
      pickerSpecificationRef.value?.open();
      break;
    // 处理供货厂商选择确认
    case "pickerManufacturerConfirm": // 处理供货厂商选择确认
      const selectedManufacturer = eData.value[0];
      // 只更新当前日期表单的specification字段
      if (formData.value.forms[currentDateIndex.value]) {
        formData.value.forms[currentDateIndex.value].manufacturer =
          selectedManufacturer;
      }
      pickerManufacturerRef.value?.close();
      break;

    case "pickerManufacturerCancel": // 处理供货厂商选择取消
      pickerManufacturerRef.value?.close();
      break;
    case "pickerManufacturerOpen": // 处理供货厂商选择取消
      pickerManufacturerRef.value?.open();
      break;
    case "tabsChange":
      handleTabsChange(eData);
      break;

    default:
      break;
  }
};

// 入库状态变更
const handleInStockStatusChange = (value) => {
  uni.showModal({
    title: "确认提示",
    content: value ? "确定已经入库了吗？" : "确定要标记为未入库吗？",
    success: (res) => {
      if (res.confirm) {
        // 只更新当前日期的支付状态
        currentForm.value.isInStock = value;
      } else {
        currentForm.value.isInStock = !value;
      }
    },
  });
};

// 计算总金额
watchEffect(() => {
  const currentForm = formData.value.forms[currentDateIndex.value];
  if (currentForm) {
    const quantity = Number(currentForm.quantity) || 0;
    const unitPrice = Number(currentForm.unitPrice) || 0;
    currentForm.totalAmount = (quantity * unitPrice).toFixed(2);
  }
});

// 表单验证
const validateForm = async () => {
  if (!formRef.value) return false;

  try {
    // 验证所有日期的表单
    const errors = [];
    // 校验规则封装
    const validateField = (formItem, field, message, validator = null) => {
      if (!formItem[field] || (validator && !validator(formItem[field]))) {
        errors.push({
          date: formItem.date,
          field,
          message,
        });
      }
    };

    // 格式校验封装（可根据需要自定义）
    const isValidString = (value) =>
      typeof value === "string" && value.trim().length > 0;
    const isPositiveNumber = (value) => !isNaN(value) && Number(value) > 0;
    const isNonNegativeNumber = (value) => !isNaN(value) && Number(value) >= 0;

    for (const formItem of formData.value.forms) {
      // 具体字段校验
      await validateField(
        formItem,
        "manufacturer",
        "供货厂商未选择",
        isValidString
      );
      await validateField(
        formItem,
        "specification",
        "规格未选择",
        isValidString
      );
      await validateField(
        formItem,
        "quantity",
        "数量未正确填写",
        isPositiveNumber
      );

      await validateField(
        formItem,
        "unitPrice",
        "单价未正确填写",
        isNonNegativeNumber
      );
    }

    if (errors.length > 0) {
      // 获取第一个错误
      const firstError = errors[0];
      toast.value?.show({
        type: "error",
        message: `${firstError.date} ${firstError.message}`,
      });

      // 切换到错误表单所在的日期
      const errorIndex = formData.value.dates.findIndex(
        (date) => date.name === firstError.date
      );
      console.log(errorIndex, "==errorIndex===");
      if (errorIndex !== -1) {
        currentDateIndex.value = errorIndex;
      }
      return false;
    }

    return true;
  } catch (error) {
    console.log(error, "==error===");
    // 处理当前表单的验证错误
    const errorMessage = error.errors?.[0]?.message || "表单验证失败";
    const currentDate = formData.value.dates[currentDateIndex.value]?.name;
    toast.value?.show({
      type: "error",
      message: currentDate ? `${currentDate} ${errorMessage}` : errorMessage,
    });
    return false;
  }
};

// 模态框确认
const handleModalConfirm = async () => {
  if (isSubmitting.value) return;
  isSubmitting.value = true;

  try {
    uni.showLoading({
      title: modalConfig.action === "delete" ? "正在删除..." : "正在提交...",
      mask: true,
    });

    let res = null;
    if (modalConfig.action === "delete") {
      const currentForm = formData.value.forms[currentDateIndex.value];
      if (!currentForm) throw new Error("未找到要删除的记录");

      res = await uniCloudInStockManager.deleteInStockRecord(currentForm._id);

      // 处理删除响应
      if (res.code === 0) {
        notify.value?.show({
          type: "success",
          message: "删除成功",
        });
        setTimeout(() => {
          uni.navigateBack({ delta: 1 });
        }, 1500);
      } else {
        throw new Error(res.message || "删除失败");
      }
    } else {
      // 处理提交/更新响应
      res = await handleSubmitConfirm();
      if (res.code === 0) {
        notify.value?.show({
          type: "success",
          message: res.message,
        });
        setTimeout(() => {
          uni.navigateBack({ delta: 1 });
        }, 1500);
      } else {
        notify.value?.show({
          type: "error",
          message: res.message,
        });
      }
    }
  } catch (error) {
    console.error("Operation error:", error);
    notify.value?.show({
      type: "error",
      message: `${
        modalConfig.action === "delete"
          ? "删除"
          : isEdit.value
          ? "更新"
          : "提交"
      }失败：${error.message || "未知错误"}`,
    });
  } finally {
    uni.hideLoading();
    isSubmitting.value = false;
  }
};

// 提交确认
const handleSubmitConfirm = async () => {
  const userInfo = uni.getStorageSync("userInfo");

  const dataList = formData.value.dates.map((date, index) => {
    const form = formData.value.forms[index];
    return {
      ...form,
      date: date.name,
      quantity: Number(form.quantity) || 0,
      remainingQuantity: Number(form.quantity) || 0,
      unitPrice: Number(form.unitPrice) || 0,
      totalAmount: Number(form.totalAmount) || 0,
      paidAmount: Number(form.paidAmount) || 0,
      remainingAmount: Number(form?.remainingAmount) || 0,
      manufacturer: form.manufacturer,
      specification: form.specification,
      userId: userInfo._id,
    };
  });

  if (isEdit.value) {
    return uniCloudInStockManager.updateInStockRecord(
      dataList[0]._id,
      dataList[0]
    );
  } else {
    return uniCloudInStockManager.addInStockRecords(dataList);
  }
};

// 加载编辑数据
const loadEditData = async (id) => {
  try {
    uni.showLoading({
      title: "加载中...",
      mask: true,
    });

    const res = await uniCloudInStockManager.getInStockRecordById(id);

    if (!res.code && res.data) {
      const data = res.data;
      // 确保数值字段类型正确
      data.quantity = Number(data.quantity) || 0;
      data.unitPrice = Number(data.unitPrice) || 0;
      data.totalAmount = Number(data.totalAmount) || 0;
      data.paidAmount = Number(data.paidAmount) || 0;
      formData.value.dates = [data.date];
      formData.value.forms = [data];
      currentForm.value = data;
    } else {
      throw new Error(res.message || "加载数据失败");
    }
  } catch (error) {
    console.error("Load data error:", error);
    toast.value?.show({
      type: "error",
      message: `加载失败：${error.message || "未知错误"}`,
    });
  } finally {
    uni.hideLoading();
  }
};

// 页面加载
onLoad((option) => {
  onLoadOption.value = option;
  if (option.id) {
    isEdit.value = option.id;
    loadEditData(option.id);
  }
});

onMounted(() => {
  if (onLoadOption?.value?.type == "add") {
    nextTick(() => {
      calendar.value.open(); // 打开日历
    });
  }
});

// 页面卸载
onUnload(() => {
  // 清理工作
  formData.value.dates = [];
  formData.value.forms = [];
  currentDateIndex.value = 0;
  isSubmitting.value = false;
});
</script>

<style lang="scss" scoped>
.container {
  height: 100vh;
  background-color: #f8f8f8;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.nav-title {
  font-size: 32rpx;
  font-weight: 500;
  color: #333;
}

.content-wrapper {
  flex: 1;
  padding: 20rpx;
  overflow-y: auto;
  padding-bottom: calc(140rpx + env(safe-area-inset-bottom));
  /* 为底部按钮预留空间 */
}

.selected-dates {
  display: flex;
  align-items: center;

  .label {
    font-size: 28rpx;
    color: #666;
    margin-right: 10rpx;
  }

  .value {
    font-size: 28rpx;
    color: #333;
    flex: 1;
  }
}

.date-tabs {
  white-space: nowrap;
  padding: 10rpx;
  background-color: #fff;
  border-radius: 8rpx;

  .date-tabs-content {
    display: inline-flex;
    padding: 0 10rpx;

    .date-tab-btn {
      margin-right: 20rpx;

      &:last-child {
        margin-right: 0;
      }
    }
  }
}

.input-prefix,
.input-suffix {
  font-size: 28rpx;
  color: #666;
  padding: 0 10rpx;
}

.footer-buttons {
  padding: 30rpx 20rpx calc(30rpx + env(safe-area-inset-bottom));
  box-sizing: border-box;
  width: 100%;
  background-color: #fff;
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 99;
  box-shadow: 0 -2rpx 20rpx rgba(0, 0, 0, 0.05);
  display: flex;

  .button-group {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 900rpx;
    margin: 0 auto;
    flex: 1;
    .button-wrapper {
      flex: 1;
      :deep(.uv-button-wrapper) {
        width: 100%;
      }
    }
  }
}

.add-icon {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;

  .add-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20rpx;

    .icon-wrapper {
      width: 120rpx;
      height: 120rpx;
      border-radius: 50%;
      background: rgba(41, 121, 255, 0.1);
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.3s ease;
      cursor: pointer;

      &:active {
        transform: scale(0.95);
        background: rgba(41, 121, 255, 0.2);
      }
    }

    .add-text {
      font-size: 28rpx;
      color: #666;
      margin-top: 10rpx;
    }
  }
}

.date-select-area {
  background: #fff;
  padding: 30rpx 20rpx;
  margin-bottom: 20rpx;
  border-radius: 12rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);

  .date-info {
    display: flex;
    align-items: center;
    gap: 12rpx;

    .date-label {
      font-size: 28rpx;
      color: #666;
    }

    .date-count {
      background: rgba(41, 121, 255, 0.1);
      color: #2979ff;
      padding: 4rpx 16rpx;
      border-radius: 20rpx;
      font-size: 24rpx;
      font-weight: 500;
    }
  }

  .button-content {
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

.form-card {
  background: #fff;
  border-radius: 12rpx;
  margin-bottom: 20rpx;
  padding: 24rpx;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);

  .card-title {
    display: flex;
    align-items: center;
    margin: -24rpx -24rpx 20rpx;
    padding: 24rpx;
    background: linear-gradient(
      to right,
      rgba(41, 121, 255, 0.05),
      rgba(41, 121, 255, 0)
    );
    position: relative;

    &::before {
      content: "";
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      width: 6rpx;
      height: 32rpx;
      background: #2979ff;
      border-radius: 0 4rpx 4rpx 0;
    }

    .icon-wrapper {
      width: 64rpx;
      height: 64rpx;
      border-radius: 16rpx;
      background: rgba(41, 121, 255, 0.1);
      display: flex;
      align-items: center;
      justify-content: center;
      margin-left: 16rpx;
    }

    text {
      font-size: 32rpx;
      font-weight: 600;
      color: #333;
      margin-left: 16rpx;
      letter-spacing: 1rpx;
    }
  }

  &.summary-card {
    :deep(.uv-cell) {
      padding: 24rpx 0;

      &:not(:last-child) {
        border-bottom: 2rpx solid #f5f5f5;
      }
    }
  }
}

.spec-selector {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 44rpx;
  padding: 4rpx 0;

  .placeholder {
    color: #999;
    font-size: 28rpx;
  }
}

.tabs-wrapper {
  background: #fff;
  padding: 0 20rpx;
  border-bottom: 2rpx solid #f5f5f5;

  .payment-status {
    padding: 10rpx 0;
    margin-top: -10rpx;
    display: flex;
    align-items: center;
    justify-content: flex-end;

    :deep(.uv-form-item) {
      margin-bottom: 0;
      padding: 6rpx 0;
    }
  }
}
</style>
